<template>
	<pop-manager :show="show" type="center">
		<view class="zan-dialog--container">
			<view v-if="title" class="zan-dialog__header">{{ title }}</view>
			<view class="zan-dialog__content" :class="{ 'zan-dialog__content--title': !!title }">
				<scroll-view class="zan-dialog__content--scroll" :scroll-y="isScroll">
					<text>{{ message }}</text>
				</scroll-view>
			</view>
			<view :class="'zan-dialog__footer ' + (buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon')">
				<block v-for="(item, index) in buttons" :key="index">
					<zan-button
						class="zan-dialog__button"
						:custom-class="index === 0 ? 'zan-dialog__button-inside--first' : 'zan-dialog__button-inside'"
						:data-type="item.type"
						:data-open-type="item.openType"
						:open-type="item.openType"
						@btnclick="handleButtonClick"
						@getUserInfo="handleUserInfoResponse"
						@getPhoneNumber="handlePhoneResponse"
						@openSetting="handleOpenSettingResponse"
					>
						<view :style="{ color: item.color || '#333' }">{{ item.text }}</view>
					</zan-button>
					<!-- <view @tap="buttonTap" :data-index="index" class="zan-dialog__button" :class="index === 0 ? 'zan-dialog__button-inside--first' : 'zan-dialog__button-inside'" :style="{ color: item.color || '#333' }">{{ item.text }}</view> -->
				</block>
			</view>
		</view>
	</pop-manager>
</template>

<script>
import popManager from '@/components/pop-manager/index.vue';
import zanButton from '@/components/btn/index.vue';

var fun = () => {};
var needResponseOpenTypes = ['getUserInfo', 'getPhoneNumber', 'openSetting'];
export default {
	components: {
		popManager,
		zanButton
	},
	data() {
		return {
			// 标题
			title: '',
			// 自定义 btn 列表
			// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
			buttons: [],
			// 内容
			message: ' ',
			// 选择节点
			selector: '#zan-dialog',
			// 是否允许滚动
			isScroll: false,
			// 按钮是否展示为纵向
			buttonsShowVertical: false,
			// 是否展示确定
			showConfirmButton: true,
			// 确认按钮文案
			confirmButtonText: '确定',
			// 确认按钮颜色
			confirmButtonColor: '#3CC51F',
			// 是否展示取消
			showCancelButton: false,
			// 取消按钮文案
			cancelButtonText: '取消',
			// 取消按钮颜色
			cancelButtonColor: '#333',
			key: '',
			autoClose: true,
			show: false,
			showCustomBtns: false,
			promiseFunc: {},
			openTypePromiseFunc: {}
		};
	},
	methods: {
		handleButtonClick(e) {
			let currentTarget = e.currentTarget;
			currentTarget = currentTarget === undefined ? {} : currentTarget;
			let dataset = currentTarget.dataset;
			dataset = dataset === undefined ? {} : dataset;

			// 获取当次弹出框的信息

			let ref = this.promiseFunc || {};
			let refResolve = ref.resolve;
			let resolve = refResolve === undefined ? fun : refResolve;
			let refReject = ref.reject;
			let reject = refReject === undefined ? fun : refReject;

			// 重置展示

			if (this.autoClose) {
				this.show = false;
			}

			// 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
			if (this.showCustomBtns) {
				let isNeedOpenDataButton = needResponseOpenTypes.indexOf(dataset.openType) > -1;
				let resolveData = {
					type: dataset.type
				};
				// 如果需要 openData，就额外返回一个 promise，用于后续 open 数据返回
				if (isNeedOpenDataButton) {
					resolveData.openDataPromise = new Promise(function(resolve, reject) {
						this.openTypePromiseFunc = { resolve, reject };
					});
					resolveData.hasOpenDataPromise = true;
				}
				resolve(resolveData);
				return;
			}

			// 默认按钮，确认为 resolve，取消为 reject
			if (dataset.type === 'confirm') {
				resolve({
					type: 'confirm'
				});
			} else {
				reject({
					type: 'cancel'
				});
			}
			this.promiseFunc = {};
		}
	}
};
</script>

<style>
.zan-dialog--container {
	width: 80vw;
	font-size: 16px;
	overflow: hidden;
	border-radius: 4px;
	background-color: #fff;
	color: #333;
}
.zan-dialog__header {
	padding: 15px 0 0;
	text-align: center;
}
.zan-dialog__content {
	position: relative;
	padding: 15px 20px;
	line-height: 1.5;
	min-height: 40px;
}
.zan-dialog__content::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
	border: 0 solid #e5e5e5;
	border-bottom-width: 1px;
}
.zan-dialog__content--title {
	color: #999;
	font-size: 14px;
}
.zan-dialog__content--scroll {
	max-height: 70vh;
}
.zan-dialog__footer {
	overflow: hidden;
}
.zan-dialog__button {
	-webkit-box-flex: 1;
	flex: 1;
	position: relative;
	color: #333;
	background-color: #fff;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 2px;
	font-size: 16px;
	line-height: 45px;
	height: 45px;
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	overflow: visible;
}
.zan-dialog__button-inside,
.zan-dialog__button-inside--first {
	margin-bottom: 0;
	line-height: 50px;
	height: 50px;
}
.zan-dialog__button-inside--first::after,
.zan-dialog__button-inside::after {
	border-width: 0;
	border-radius: 0;
}
.zan-dialog__footer--horizon {
	display: -webkit-box;
	display: flex;
}
.zan-dialog__footer--horizon .zan-dialog__button-inside::after {
	border-left-width: 1px;
}
.zan-dialog__footer--vertical .zan-dialog__button-inside::after {
	border-top-width: 1px;
}
</style>
